<template>
  <div id="bat_container">
    <img v-if="state === 3" @click.stop="choose" class="bat" :src="heal" alt="aa">
    <img v-else @click.stop="choose" class="bat" :src="brok" alt="aa">
    <div v-show="chosen">
      <CaretRightOutlined v-if="left" class="arrow"/>
      <CaretLeftOutlined v-else class="arrow-right"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import health from '../../assets/cars/ battery_health.png'
import broken from '../../assets/cars/ battery_error.png'
import health_select from '../../assets/cars/ battery_health_select.png'
import broken_select from '../../assets/cars/ battery_error_select.png'
import {computed, ref} from 'vue'

interface Props {
  state?: number,
  id?: number
}

const props = withDefaults(defineProps<Props>(), {state: 3, id: 1})

const emit = defineEmits<{ (e: 'choose', id: number): void }>()

const chosen = ref(false)

const heal = computed(() => chosen.value ? health_select : health)
const brok = computed(() => chosen.value ? broken_select : broken)
const left = computed(() => props.id % 2 !== 0)
const choose = () => {
  console.log('choose clicked')
  chosen.value = true
  emit('choose', props.id)
}

const releaseFor = (id: number) => {
  console.log('release triggered @' + id)
  chosen.value = props.id === id
}

defineExpose({releaseFor})

</script>

<script lang="ts">
export default {
  name: 'Battery'
}
</script>

<style lang="scss" scoped>
.bat {
  width: 67px;
  height: 53px;
  cursor: pointer;
  margin: 1px;
}

#bat_container {
  display: flex;
  width: 67px;
  height: 53px;
  padding: 0;
  alignment: center;
}

.arrow {
  font-size: 24px;
  position: absolute;
  left: -8px;
  color: white;
  line-height: 60px;
}

.arrow-right {
  font-size: 24px;
  position: absolute;
  right: -5px;
  color: white;
  line-height: 60px;
}
</style>
